<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>查找替换</title>
        <style>
            html,body {
                padding:0;
                margin:0;
                background:#EFEFE7;
            }
            #wrap {
                width:800px;
                margin:60px auto;
                position:relative;
            }
            #wrap p {
                width:600px;
                padding:50px;
                background:#fff;
                font-size:20px;
                line-height:36px;
                text-indent:2em;
            }
            #buttons {
                position:absolute;
                right:0;
                top:0;
                width:100px;
            }
            #buttons a {
                display:block;
                width:100px;
                height:40px;
                text-decoration:none;
                text-align:center;
                background:#C0C0C0;
                margin-bottom:5px;
                line-height:40px;
                color:#fff;
                font-weight:bolder;
                font-size:20px;
                display:none;
            }
            #buttons a:hover {
                background:#E76308;
            }
            #buttons a:first-child {
                background:#94948C;
                display:block;
            }
            #toolBox {
                width:640px;
                padding:20px;
                border:10px solid #E71063;
                margin-top:20px;
                position:relative;
                background:#E7E7B5;
                display:none;
            }
            #toolBox #close {
                position:absolute;
                right:10px;
                top:10px;
                width:20px;
                height:20px;
                font-size:16px;
                line-height:20px;
                text-align:center;
                cursor:pointer;
            }#toolBox span {
                padding:5px 20px;
                font-size:20px;
            }
            #toolBox .active {
                background:#E76308;
                color:#fff;
            }
            #search, #replace {
                width:640px;
                padding:30px 0;
                border-top:3px solid #E76308;
                margin-top:3px;
            }
            #search input[type="text"] , #replace input[type="text"] {
                width:200px;
                height:30px;
                padding:4px;
                margin-right:10px;
            }
            #search input[type="button"] , #replace input[type="button"] {
                font-size:18px;
                padding:2px 10px;
            }
        </style>
        <script>
            window.onload = function () {
                var oP = document.getElementsByTagName("p")[0];
                var aLink = document.getElementsByTagName("a");
                var oToolBox = document.getElementById("toolBox");
                var oClose = document.getElementById("close");
                var aSpan = oToolBox.getElementsByTagName("span");
                var oSearch = document.getElementById("search");
                var sInput = oSearch.getElementsByTagName("input");
                var oReplace = document.getElementById("replace");
                var rInput = oReplace.getElementsByTagName("input");
                var str = oP.innerHTML;
                
                aLink[0].onclick = function () {
                    aLink[1].style.display = "block";
                    aLink[2].style.display = "block";
                }
                
                oClose.onclick = function () {
                    oToolBox.style.display = "none";
                }
                
                aSpan[0].onclick = search;
                aSpan[1].onclick = replaces;
                
                function search() {
                    oP.innerHTML = str;
                    oSearch.style.display = "block";
                    oReplace.style.display = "none";
                    aSpan[0].className = "active";
                    aSpan[1].className = "";
                }
                function replaces() {
                    oP.innerHTML = str;
                    oSearch.style.display = "none";
                    oReplace.style.display = "block";
                    aSpan[0].className = "";
                    aSpan[1].className = "active";
                }
                
                function clearAlink() {
                    oToolBox.style.display = "block";
                    aLink[1].style.display = "none";
                    aLink[2].style.display = "none";
                }
                aLink[1].onclick = function () {
                    clearAlink();
                    search();
                }
                aLink[2].onclick = function () {
                    clearAlink();
                    replaces();
                }
                
                sInput[1].onclick = function () {
                    if( !sInput[0].value ) {
                        oP.innerHTML = str;
                        alert("请输入要查找的内容！");
                    }else {
                        if( str.indexOf( sInput[0].value ) == -1 ) {
                            alert("对不起，您输入的 【"+ sInput[0].value +"】无法找到！");
                            oP.innerHTML = str;
                            sInput[0].value = "";
                        }else {
                           
                            oP.innerHTML = str;
                            var arr = str.split( sInput[0].value );
                            oP.innerHTML = arr.join( "<span style='background:yellow;'>"+ sInput[0].value +"</span>" );
                            sInput[0].value = "";
                        }
                    }
                }
                
                rInput[2].onclick = function () {
                    if( !rInput[0].value ) {
                        oP.innterHTML = str;
                        alert("请输入要替换的内容！");
                    }else {
                        if( str.indexOf(rInput[0].value) == -1 ) {
                            alert("对不起，您输入的 【"+ rInput[0].value +"】无法找到！");
                            oP.innerHTML = str;
                            rInput[0].value = "";
                        }else {
                             if( !rInput[1].value ) {
                                if( !confirm("您确定要删除输入的内容吗？") ) {
                                    rInput[0].value = "";
                                    return;
                                }
                            }
                        
                            oP.innerHTML = str;
                            var arr = str.split( rInput[0].value );
                            oP.innerHTML = arr.join( rInput[1].value );
                            rInput[0].value = "";
                            rInput[1].value = "";
                        }
                    }
                }
                
            }
        </script>
    </head>
    <body>
        <div id="wrap">
            <p>美国硅谷一向被视为基于自由市场创新的一个“标杆”。然而现在有两位风险投资家站出来大喊一嗓子：不对，你们理解得远不够全面!他们写了一本《硅谷生态圈》，其中说：“开始的时候我们并不认为政府是创新中必不可少的因素，但是我们的亲身经历告诉我们，公共机构承担了远比一般思维中所认为的更为重要的角色。”硅谷尚且如此，可见政府在创新中所发挥的作用正日益受到全球范围内越来越充分的认可。而事实上，中国政府力推“双创”，对于创业创新的扶持力度，已走在世界前列。</p>
            <div id="buttons">
                <a href="javascript:;">展开</a>
                <a href="javascript:;">查找</a>
                <a href="javascript:;">替换</a>
            </div>
            <div id="toolBox">
                <div id="close">X</div>
                <span class="active">查找</span>
                <span>替换</span>
                <div id="search">
                    <input type="text"/>
                    <input type="button" value="查找"/>
                </div>
                <div id="replace">
                    <input type="text"/>
                    <input type="text"/>
                    <input type="button" value="替换"/>
                </div>
            </div>
        </div>
    </body>
</html>>